<template>
	<a-modal v-model:open="visible" :title="'算法报警控制'" :centered="true" width="400px" @cancel="cancel">
		<a-spin :spinning="modalLoading" style="margin-top: 90px">
			<div class="algo-alarm-modal-content">
				<div class="select-all">
					<a-checkbox v-model:checked="isAll" class="check-all" @change="selectAll">全选</a-checkbox>
				</div>
				<a-checkbox-group v-model:value="checkedValue" class="check-box">
					<a-checkbox :key="item.value" v-for="item in AIServiceList" :value="item.value" class="check-item">{{ item.label }}</a-checkbox>
				</a-checkbox-group>
			</div>
		</a-spin>
		<template #footer>
			<a-button @click="cancel">取消</a-button>
			<a-button :disabled="modalLoading" :loading="confirmLoadingObj.type === 0 && confirmLoadingObj.loading" @click="operate(0)"
				>禁用</a-button
			>
			<a-button
				type="primary"
				:disabled="modalLoading"
				:loading="confirmLoadingObj.type === 1 && confirmLoadingObj.loading"
				@click="operate(1)"
				>启用</a-button
			>
		</template>
	</a-modal>
</template>

<script lang="ts" setup>
import { CameraManagementAPI, AlarmDeviceManagementAPI } from '../../api';
const $message: any = inject('$message');
const visible = ref(false);
const modalLoading = ref(false);
const checkedValue = ref<any[]>([]);
const isAll = ref(false);
const AIServiceList = ref<Record<string, any>[]>([]);
const confirmLoadingObj = ref({ type: 0, loading: false });

const resetModal = () => {
	isAll.value = false;
	checkedValue.value = [];
	AIServiceList.value = [];
	modalLoading.value = false;
	confirmLoadingObj.value = { type: 0, loading: false };
};

const operate = async (type: 0 | 1) => {
	console.log('type', type);
	let params = {
		status: type, // 0 禁用 1启用
		aiTypeList: checkedValue.value
	};
	confirmLoadingObj.value = { type: type, loading: true };
	let res = await AlarmDeviceManagementAPI.updateBatchAiSrvAvDeviceEnabled(params);
	confirmLoadingObj.value = { type: type, loading: false };
	if (res.code === 0) {
		$message.success('操作成功');
		visible.value = false;
		resetModal();
	}
};

const selectAll = () => {
	if (isAll.value) {
		checkedValue.value = AIServiceList.value.map((item) => item.value);
		return;
	}
	checkedValue.value = [];
};

const watchEffectStop = watchEffect(() => {
	isAll.value = checkedValue.value.length === AIServiceList.value.length;
});

const cancel = () => {
	visible.value = false;
	resetModal();
};

const getAIServiceList = async (): Promise<void> => {
	let { data } = await CameraManagementAPI.AIServiceList();
	AIServiceList.value = data;
};

const open = async () => {
	visible.value = true;
	modalLoading.value = true;
	await getAIServiceList();
	modalLoading.value = false;
};

defineExpose({ open });
onUnmounted(() => {
	watchEffectStop();
});
</script>

<style lang="less" scoped>
.algo-alarm-modal-content {
	overflow-y: auto;
	min-height: 478px;
	max-height: 478px;

	.select-all {
		padding: 20px 40px 0;
		padding-bottom: 0;

		.check-all {
			margin-bottom: 16px;
			margin-left: 12px;
			color: #3d7fe9;
			gap: 8px;
		}
	}

	.check-box {
		width: 100%;
		flex-flow: column;
		gap: 16px;
		padding: 20px 40px;
		padding-top: 0;

		.check-item {
			width: 100%;
			border-radius: 6px;
			padding: 8px 12px;
			color: @text01;
			background: rgba(240, 246, 252, 0.1);
			gap: 12px;
		}
	}
}
</style>
